import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import { useTemuStore } from '@/store/temu';
import { useId } from 'react';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export default function SourceInfoSetting({ children, className, ...props }: Props) {
  const sourceInfoSettings = useTemuStore((state) => state.sourceInfoSettings);
  const dispatch = useTemuStore((state) => state.dispatch);
  const id = useId();
  return (
    <div className={cn(className, 'flex flex-col')} {...props}>
      <div className="grow relative">
        <ScrollArea className="border rounded-sm !absolute h-full w-full p-2 pt-2">
          <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-refresh-interval'}>
              货源挂载信息的刷新间隔:
            </Label>
            <Input
              value={sourceInfoSettings.refreshInterval}
              type="number"
              onChange={(event) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.sourceInfoSettings.refreshInterval = +event.target.value;
                  },
                });
              }}
              id={id + '-refresh-interval'}
              className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
            />
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}
